<template>
  <div class="bind-phone">
    <p class="title">手机绑定</p>
    <p class="tip">请绑定手机号，账号更安全</p>
    <div class="div-input">
      <img src="@/assets/bangdingshouji01.png" class="phone-img" alt="">
      <input type="number" v-model="phone" placeholder="请输入手机号码">
    </div>
    <div class="div-input">
      <img src="@/assets/bangdingshouji02.png" class="code-img" alt="">
      <input type="number" class="code" v-model="code" placeholder="请输入验证码">
      <span v-show="sending == 'false'" @click="addCode">短信验证</span>
      <span v-show="sending == 'true'">{{time}}s</span>
    </div>
    <span class="btn" @click="submit">提交</span>
    <span class="i-tip">手机号一经绑定无法更改</span>
    <alert-box :alert-message = "alert"  v-if="alert"></alert-box>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script>
import { AlertModule, Toast } from 'vux';
import { sendCode, bindMobile } from '@/api/api'
import alertBox from '@/components/alertBox';
  export default {
    components: {
      alertBox,
      Toast
    },
    data () {
      return {
        alert: {},
        phone: '',
        code: '',
        is_toast: false,
        toast_con: '',
        sending: 'false',
        time: null,
        timer: null,
      }
    },
    created () {
      this.alert = {
        tip: '恭喜您，绑定手机号成功',
        btn: '返回',
        path: {path: '/personal'},
        is_show: false,
      }
      if(!localStorage.getItem('time')){
        localStorage.setItem('time', 60);
        localStorage.setItem('sending', false);
        this.time = 60;
      }else{
        this.time = localStorage.getItem('time');
        this.sending = localStorage.getItem('sending');
        if(this.time == 60 || this.time == 0){
          return;
        }
        this.timeout()
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      submit () {
        if(!this.phone || !this.code){
          AlertModule.show({
            title: '温馨提示',
            content: '输入内容不能为空'
          })
          return;
        }
        var dataJson = {
          code: this.code,
          mobile: this.phone,
          scene: '6'
        }
        bindMobile(dataJson).then((res) => {
          if(res.data.code == 200){
            this.alert.is_show = true
          }
        }).catch((err) => {
          console.dir(err)
        })        
      },
      addCode() {
        if(!this.phone){
          AlertModule.show({
            title: '温馨提示',
            content: '请输入手机号码'
          })
          return;
        }
        var jsonData = {
          mobile: this.phone,
          scene: '6'
        }
        sendCode(jsonData).then((res) => {
          this.is_toast = true;
          this.toast_con = res.data.msg;
          if(res.data.code == '200'){
            this.sending = 'true';
            localStorage.setItem('sending', true);
            if(this.timer){
              clearInterval(this.timer);
            }
            this.timeout()
          }
        }).catch((err) => {
          console.dir(err)
        })
      },
      // 倒计时
      timeout() {
        this.timer = setInterval(() => {
          if(this.time <=0){
            clearInterval(this.timer);
            this.sending = 'false';
            this.time = 60;
            localStorage.setItem('time', 60);
            localStorage.setItem('sending', false);
            return;
          }
          this.time--;
          localStorage.setItem('time', this.time);
        }, 1000)
      }
    }
  }
</script>

<style lang="stylus" scoped>
.bind-phone
  height 100vh
  background-color #fff
  padding-top 3.2rem
  box-sizing border-box
  .title
    color #333
    font-size 2.6rem
    line-height 2.6rem
    height 2.6rem
    font-weight bold
    text-align center
    margin-top 3.2rem
  .tip
    color #999
    font-size 1.5rem
    line-height 1.6rem;
    height 1.6rem;
    margin-top 1.5rem
    text-align center
    padding-bottom 1rem
  .div-input
    width 82%
    margin-left 9%
    height 5rem
    line-height 5rem
    color #333
    font-size 1.5rem
    position relative
    border-radius 100px
    margin-top 2rem
    background-color #f5f5f5
    .phone-img
      width 1.4rem
      position absolute
      left 2rem
      top 1.5rem
      z-index 1
    .code-img
      position absolute
      width 1.4rem
      top 1.7rem
      z-index 1
      left 2rem
    input
      width 100%
      height 100%
      background-color #f5f5f5
      border-radius 100px
      position absolute
      padding-left 4.7rem
      box-sizing border-box
      left 0
      top 0
      font-size 1.5rem
      outline none
    .code
      width calc(100% - 9rem)
    span
      color #172F6D
      font-size 1.5rem
      line-height 2rem
      height 2rem
      position absolute
      width 9.4rem
      top 1.5rem
      right 0
      text-align center
      border-left 1px solid #172F6D
  .btn
    width 82%;
    margin-left 9%
    height 5.3rem
    line-height 5.3rem
    margin-top 3rem
    text-align center
    color #fff
    background-color #172F6D
    border-radius 100px
    font-size 1.7rem
    font-weight bold
    display block
  .i-tip
    font-size 1.3rem
    color #666
    margin-top 2rem
    text-align center
    display block
</style>
